<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        table {
               border-collapse:collapse ;
               margin: auto;
               }
        th, td{
               border: 1px solid;
               padding: 4px 10px;
               text-align: center;
              }       
    </style>
     
</head>
<body>
 <table border="1" >
 <thead>
 <tr>
    <th>项目</th>
    <th>金额(元)</th>
    <th>杜明鹏118240352</th>
    <!-- 单位这一块 -->
 </tr>
 </thead>
 <tbody>
    <tr><td>银行卡总金额</td><td id="money"></td></tr>
    <tr><td>电费</td><td id="electricity_bill"></td></tr>
    <tr><td>水费</td><td id="water_bill"></td></tr>
    <tr><td>网费</td><td id="internet_bill"></td></tr>
    <tr><td>余额</td><td id="balance"></td></tr>
 </tbody>
 </table>
    <script>
        // 测试1
        let name = prompt("请输入你的名字")
        let age = prompt("请输入你的年龄")
        let sex = prompt("请输入你的性别")
console.log(name);
console.log(age);
console.log(sex);


// 测试2
 let age1 = +prompt("请输入你年龄")
 age2 = age1+5
//  模板字符串
alert(`据我估计，五年后，你可能${age2}岁了`)


// 测试3

let money = +prompt('请输入银行卡金额')
let electricity_bill = +prompt('请输入本月电费')
let water_bill = +prompt('请输入本月水费')
let internet_bill = +prompt('请输入本月网费')
let balance = (money-(electricity_bill+water_bill+internet_bill))
document.getElementById('money').textContent =money.toFixed(2)
document.getElementById('electricity_bill').textContent = electricity_bill.toFixed(2)
document.getElementById('water_bill').textContent = water_bill.toFixed(2)
document.getElementById('internet_bill').textContent = internet_bill.toFixed(2)
document.getElementById('balance').textContent = balance.toFixed(2)

</script>
</body>
</html>